<template>
  <base-breadcrumb>
    <searchData :searchData="searchOptions" @search="handleSearch" />
    <a-card class="table-page-wrapper">
      <div class="table-operator">
        <!-- <TitleName title="钢筋技术优化"></TitleName> -->
      </div>
      <!-- 表格 -->
      <list-table
        ref="table"
        :columns="columns"
        :startIndex="0"
        :request="loadData"
        :is-show-count-bar="false"
        @select-click="selectClick"
        :exportConfig="{
          use: true,
          select: $route.meta.title,
          all: $route.meta.title,
          customColumns: columns
        }"
      >
        <a-button
          slot="prefix"
          class="mb20"
          type="primary"
          icon="plus"
          @click="handleAdd"
          v-btnPermission="'tm_002_add_01'"
          >新增上报</a-button
        >
        <a-collapse slot="suffix" :bordered="false" v-model="activeKey" expand-icon-position="right" class="mb12">
          <a-collapse-panel style="background: #e6f3fc; border: none" :showArrow="false">
            <template slot="header">
              <a-row type="flex" justify="space-between" align="middle" style="width: 100%">
                <div>
                  <a-icon style="color: #108ee9" type="exclamation-circle" />
                    <span>
                    已选择<a>{{ selectLength || 0 }}</a> 项</span
                  >
                  <span>
                     总计：<a>{{ totalSize  || 0  }}</a></span
                  >
                  <span>
                    待提交审核：<a>{{ totalInfo.draft || 0 }}</a> 个</span
                  >
                  <span
                    >{{ ' | ' }}审核中：<a>{{ totalInfo.submitted || 0 }}</a> 个</span
                  >
                  <span
                    >{{ ' | ' }}审核通过：<a>{{ totalInfo.past || 0 }}</a> 个</span
                  >
                  <span
                    >{{ ' | ' }}审核不通过：<a>{{ totalInfo.reject || 0 }}</a> 个</span
                  >
                  <span
                    >{{ ' | ' }}优化率：<a>{{ totalInfo.rate || 0 }}%</a></span
                  >
                </div>
                <div>
                  <a class="btn_right">
                    <span>{{ activeKey.length > 0 ? '收起' : '展开' }}排名信息</span>
                    <a-icon :type="activeKey.length > 0 ? 'up' : 'down'" />
                  </a>
                </div>
              </a-row>
            </template>
            <div class="combox-table-wrapper">
              <div
                v-for="(tableItem, index) in comboxTableList"
                :key="tableItem.title"
                :class="index === 0 ? 'left-table-wrapper' : 'right-table-wrapper'"
              >
                <div class="table-title">{{ tableItem.title }}</div>
                <a-table
                  class="table"
                  size="small"
                  row-key="id"
                  bordered
                  :scroll="{ y: 200 }"
                  :data-source="tableItem.list"
                  :columns="index === 0 ? leftColumns : rightColumns"
                  :pagination="false"
                ></a-table>
              </div>
            </div>
          </a-collapse-panel>
        </a-collapse>
        <span slot="description" slot-scope="text">
          <ellipsis :length="8" tooltip>{{ text }}</ellipsis>
        </span>
        <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
        <template slot="totalRate" slot-scope="text">
          <span>{{ text || 0 }}</span>
        </template>
        <template slot="auditStatusStr" slot-scope="text, record">
          <list-status :status="record.auditStatus" :isApproval="true" conversion="en" :text="text"></list-status>
        </template>
        <!-- 操作 -->
        <span slot="operation" slot-scope="text, record">
          <MoreButton>
            <a @click="detailed(record)" v-btnPermission="'tm_002_loo_04'">查看</a>
            <a
              @click="addEdit(record)"
              v-if="(record.auditStatus === 'DRAFT' || record.auditStatus === 'REJECTED')&&selfBtnShow(record.creatorId)"
              v-btnPermission="'tm_002_edi_02'"
              >编辑</a
            >
            <a
              v-if="record.auditStatus === 'DRAFT'&&selfBtnShow(record.creatorId)"
              @click="discard(record)"
              v-btnPermission="'tm_002_del_03'"
              >删除</a
            >

            <a
              v-if="record.auditStatus && record.auditStatus !== 'DRAFT'"
              @click="toggleApprovalDetails(record)"
              v-btnPermission="'tm_002_moi_05'"
              >审批信息</a
            >
          </MoreButton>
        </span>
      </list-table>
    </a-card>
    <ApprovalDetails
      :visible="visible.approvalDetails"
      :businessId="childInitData.id"
      @cancel="visible.approvalDetails = false"
      @confirm="visible.approvalDetails = false"
    />
  </base-breadcrumb>
</template>

<script>
import { typeListApproval } from '@/utils/util'
import ApprovalDetails from '@/components/approvalDetails'
import { STable } from '@/components'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目
import OrgTreeSelect from '@/components/OrgTreeSelect'
import { dataList, tableDelete, getSteelTotalInfo, getSteelRankList } from '@/api/technologySteel'
import TitleName from '@/components/TitleName/index.vue'
import { Collapse } from 'ant-design-vue' // ant

const searchOptions = [
  // {
  //   name: '所属分公司',
  //   valueKey: 'branchOffice',
  //   type: SelectSubCompany
  // },
  // {
  //   name: '所属项目',
  //   keyValue: 'branchOffice',
  //   valueKey: 'project',
  //   type: SelectProject
  // },
  {
    name: '所属单位',
    valueKey: 'searchQuery',
    type: OrgTreeSelect,
  },
  {
    name: '名称',
    value: 'name',
    type: 'input'
  },
  {
    name: '状态',
    value: 'state',
    type: 'select',
    data: typeListApproval
  },
  {
    name: '填报人',
    value: 'filledBy',
    type: 'input'
  },
  {
    name: '填报时间',
    value: 'fillingTime',
    type: 'date'
  }
]
const columns = [
  {
    title: '序号',
    width: '65px',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '项目名称',
    dataIndex: 'projectName',
    ellipsis: true
  },
  {
    title: '名称',
    dataIndex: 'projectTitle',
    ellipsis: true
  },
  {
    title: '优化率（%）',
    width: '120px',
    dataIndex: 'totalRate',
    scopedSlots: { customRender: 'totalRate' },
    ellipsis: true
  },
  {
    title: '所属分公司',
    dataIndex: 'branchComName',
    ellipsis: true
  },
  {
    title: '填报时间',
    dataIndex: 'createTime',
    ellipsis: true
  },
  {
    title: '填报人',
    dataIndex: 'vompletedBy',
    ellipsis: true
  },
  {
    title: '状态',
    dataIndex: 'auditStatusStr',
    width: '110px',
    scopedSlots: { customRender: 'auditStatusStr' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: '170px',
    scopedSlots: { customRender: 'operation' }
  }
]

const leftColumns = [
  {
    align: 'center',
    title: 'Top',
    dataIndex: 'sort'
  },
  {
    align: 'center',
    title: '公司名称',
    dataIndex: 'name'
  },
  {
    align: 'center',
    title: '优化率%',
    dataIndex: 'rate'
  }
]

const rightColumns = [
  {
    align: 'center',
    title: 'Top',
    dataIndex: 'sort'
  },
  {
    align: 'center',
    title: '项目名称',
    dataIndex: 'name'
  },
  {
    align: 'center',
    title: '优化率%',
    dataIndex: 'rate'
  }
]
export default {
  name: 'a' + Date.now(),
  components: {
    TitleName,
    STable,
    ApprovalDetails,
    ACollapse: Collapse,
    ACollapsePanel: Collapse['Panel']
  },
  data() {
    this.columns = columns
    return {
      comboxTableList: [],
      totalInfo: {},
      leftColumns,
      rightColumns,
      activeKey: [],
      childInitData: {},
      selectLength:0,
      visible: {
        approvalDetails: false
      },
      loading: {
        delete: false
      },
      from: {},
      searchOptions: searchOptions,
      // 高级搜索 展开/关闭
      advanced: false,
      // 分页参数
      queryParam: {
        query: {
          project: '', //所属项目
          name: '', //名称
          filledBy: '', //填报人
          branchOffice: '', //分公司
          fillingTime: '', //填报时间
          state: '' //审批状态
        },
        pageSize: 10, //分页条数
        pageNo: 1 //当前分页
      },
      branchOffice: [
        { value: 0, name: '成都分公司' },
        { value: 1, name: '上海分公司' }
      ],
      totalSize:0,
      dataSource: null,
      totalPage: '',
      loadData: parameter => {
        const params = { ...parameter, query: this.queryParam }
        this.getSteelTotalInfoReq(params) // 调用统计接口
        return dataList(params).then((res)=>{
          this.totalSize = res.totalSize;
          return res;
        })
      }
    }
  },
  created() {
    this.loadComboxTable()
  },
  methods: {
     selectClick(a,b){
      this.selectLength = a.rows.length;
    },
    async getSteelTotalInfoReq(params) {
      try {
        const res = await getSteelTotalInfo(params)
        this.totalInfo = res.data || {}
      } catch (e) {
        console.error(e)
      }
    },
    /**
     * 加载统计表格数据
     */
    async loadComboxTable() {
      try {
        const res = await getSteelRankList()
        const data = res.data || {}
        this.comboxTableList = []
        Object.keys(data).forEach(item => {
          this.comboxTableList.push({
            title: item,
            list: data[item]
          })
        })
      } catch (e) {
        console.error(e)
      }
    },
    toggleApprovalDetails(data) {
      this.childInitData = { ...data }
      this.visible.approvalDetails = true
    },
    initialData() {
      this.$refs.table.refresh()
    },
    handleSearch(val = {}) {
      this.queryParam = {
        ...val
      }
      this.$refs.table.refresh(true)
    },
    // 新增
    handleAdd() {
      this.$router.push({
        path: '/technical/steelTendon/newSteelForm',
        query: {
          isShow: true,
          pageFlag: 'add'
        }
      })
    },
    // 查看
    detailed(e) {
      this.$router.push({
        path: '/technical/steelTendon/detailed',
        query: {
          id: e.id || ''
        }
      })
    },
    // 编辑
    addEdit(e) {
      this.$router.push({
        path: '/technical/steelTendon/newSteelForm',
        query: {
          isShow: true,
          pageFlag: 'edit',
          id: e.id || ''
        }
      })
    },
    // 收起展开
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    // 获取到填写时间
    WriteTime(date, datestring) {
      this.queryParam.query.fillingTime = datestring
    },
    // 清空表单
    addEmpty() {
      this.queryParam.query.project = ''
      this.queryParam.query.name = ''
      this.queryParam.query.filledBy = ''
      this.queryParam.query.branchOffice = ''
      this.queryParam.query.fillingTime = ''
      this.queryParam.query.state = ''
      this.initialData()
    },
    // 搜索
    addSearch() {
      this.initialData()
    },
    onShowSizeChange(current, pageSize) {
      this.queryParam.pageSize = pageSize
      this.this.queryParam.pageNo = current
    },
    onChange(e) {
      console.log(11111111111, e)
    },
    discard(record) {
      let _this = this
      this.$confirm({
        title: '温馨提示',
        content: '确定是否删除数据？',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          return tableDelete({ id: record.id }).then(res => {
            _this.$message.success('删除成功')
            _this.initialData()
          })
        },
        onCancel() {}
      })
    },
    // // 删除
    // discard(e) {
    //   if(this.loading.delete) return
    //   this.loading.delete = true
    //   tableDelete({
    //     id:e.id
    //   }).then((res) => {
    //     this.loading.delete = false
    //     if (res.code === 200 || res.data.code === 200) {
    //       this.$message.success('删除成功！')
    //       this.initialData()
    //     }
    //   }).catch(err => {
    //     this.loading.delete = false
    //   })
    // },
    handlePageChange(pageNo, pageSize) {},
    showSizeChange(pageNo, pageSize) {}
  }
}
</script>

<style lang="less">
.combox-table-wrapper {
  display: flex;
  align-items: flex-start;
  .left-table-wrapper,
  .right-table-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .table-title {
      width: 70%;
      font-size: 20px;
    }
    .table {
      width: 70%;
      background-color: #ffffff;
    }
  }
  .left-table-wrapper {
    border-right: 1px solid #cccccc;
  }
}
</style>
